<template>
    <main class="editor shadow">
      <div id="editor"></div>
      <section class="actions">
        <a-button type="primary" @click="showModal">{{sumbitBtnMessage}}</a-button>
        <a-button type="danger">清空</a-button>
        <a-button type="primary" @click="goback">返回创作列表</a-button>
      </section>
      <b-modal ref="modal" @submit="submit" />
    </main>
  </template>

<script>
    // import {
    //     useRoute
    // } from "vue-router";
    // import xss from "xss"; 单用户可以不用
    import {
        onMounted,
        ref
    } from "vue";
    import {
        useLocalStorage
    } from "@u/local-storage.js";
    import {
        useEditor
    } from "@u/editor.js";
    import {
        useInfoNotice,
        useErrorNotice,
        useSuccessNotice
    } from "@u/notice.js";
    import {
        useDebouce
    } from "@u/fangdou.js";
    import BModal from "@b/modal.vue";
    import http, {
        lazyRequest
    } from "@u/http";
    import {
        userRouteQuery
    } from "@u/route";
    import {

        useRoutePathToPage,
    } from "@u/router.js";
    export default {
        components: {
            BModal,
        },
        setup() {
            const editor = useEditor();
            editor.config.zIndex = 0;
            editor.config.height = 600;

            const [draft] = useLocalStorage("draft");

            onMounted(() => editor.txt.html(draft.value));

            editor.config.onchange = useDebouce((newHtml) => {
                draft.value = (newHtml);
                useInfoNotice({
                    message: "草稿",
                    description: "已缓存在本地",
                });
            }, 3000);

            const modal = ref(null);
            const showModal = () => modal.value.setVisible(true);

            let submit = async(record) => {
                try {
                    modal.value.okButtonProps.loading = true;
                    const request = http.post("/articles", {
                        ...record,
                        content: editor.txt.html(),
                    });

                    await lazyRequest(request); //将成功的请求延时
                    useSuccessNotice({
                        message: "发布成功",
                    });
                } catch (error) {
                    useErrorNotice({
                        message: "发布失败",
                        description: error.reason || "未知错误",
                    });
                } finally {
                    modal.value.setVisible(false);
                    modal.value.okButtonProps.loading = false;
                }
            };
            //把id给他
            const id = userRouteQuery("id");
            // console.log(id);
            const updateFlag = Boolean(id);
            console.log(updateFlag);

            //通过拿到的id判断当前更新界面相关的内容
            if (updateFlag) {
                onMounted(async() => {
                    try {
                        const {
                            data
                        } = await http.get(`articles/${id}`)
                            //设置内容绑定
                        editor.txt.html(data.content);
                        modal.value.formRecord.title = data.title;
                        modal.value.formRecord.synopsis = data.synopsis;
                        modal.value.formRecord.type = data.type;
                        useSuccessNotice({
                            message: "记得及时更新哟",
                            description: "更新完不要按错按钮哟",
                        });
                    } catch (error) {
                        useInfoNotice({
                            message: "文章更新获取失败",
                            description: error.data || error.reason || "未知的错误",
                        });
                    }
                });
                //有未知的错误就将submit修改  更新成功了加点懒加载
                submit = async(record) => {
                    modal.value.okButtonProps.loading = true;
                    try {
                        const request = http.put(`/articles/${id}`, {
                            ...record,
                            //更新了内容变化
                            content: editor.txt.html()
                        });
                        await lazyRequest(request, 1000);
                        useSuccessNotice({
                            message: "文章更新成功",

                        });
                    } catch (error) {
                        useErrorNotice({
                            message: "文章更新失败",
                            description: error.data || error.reason || "未知的错误",
                        });
                    } finally {
                        //最后关闭当前模态框 还有加载按钮
                        modal.value.setVisible(false);
                        modal.value.okButtonProps.loading = false;
                    }
                }
            }

            //更改一下按钮界面  更新进来时候应该是更新不是发布
            const sumbitBtnMessage = updateFlag ? "更新内容" : "发布";
            //同理清空也可以改
            // const delBtnMessage = updateFlag ? "清空重构" : "清空";
            //定义一个返回列表的按钮
            const goback = () => {
                const toPage = useRoutePathToPage(`/manage/articles/1`);
                toPage();
            };
            return {
                modal,
                showModal,
                submit,
                sumbitBtnMessage,
                // delBtnMessage,
                goback
            };
        },
    };
</script>

<style scoped>
    .editor {
        margin: 30px 10px;
        background-color: #eceff1;
        padding: 10px;
        border-radius: 4px;
    }
    
    .actions {
        padding: 8px;
        text-align: center;
    }
    
    .actions>* {
        margin: 10px;
    }
</style>